<template>
  <div v-bind="$attrs" :style="styles" :class="classes" class="w-avatar">
    <div v-if="badge && badge > 0" :style="badgeStyle" :class="badgeClass" class="dot-count w-avatar--count">
      {{ typeof badge != "boolean" ? badge : null }}
    </div>
    <div v-if="src" class="con-img w-avatar--con-img">
      <img :src="src" :alt="text" />
    </div>
    <w-icon v-if="icon" :style="iconStyle">{{ icon }}</w-icon>
    <span v-else :title="text" :style="textStyle" :class="textClass" translate="no" class="w-avatar--text notranslate">
      {{ text ? returnText : "" }}
    </span>
  </div>
</template>

<script>
  import _color from "../../utils/color.js";
  import { ref, computed } from "vue";
  export default {
    name: "w-avatar",
    props: {
      badge: {
        type: [Boolean, String, Number],
        default: false
      },
      badgeColor: {
        default: "danger",
        type: String
      },
      size: {
        type: String,
        default: null
      },
      src: {
        type: String,
        default: null
      },
      icon: { type: String, default: null },
      textColor: {
        type: String,
        default: "rgb(255, 255, 255)"
      },
      iconColor: {
        type: String,
        default: "rgb(255, 255, 255)"
      },
      text: {
        type: [String, Number],
        default: null
      },
      color: {
        type: String,
        default: "rgb(95, 195, 195)"
      },

      // Sizes.
      xs: { type: Boolean },
      sm: { type: Boolean },
      md: { type: Boolean },
      lg: { type: Boolean },
      xl: { type: Boolean }
    },
    setup(props, ctx) {
      const size = computed(() => {
        return (
          (props.xs && "xs") ||
          (props.sm && "sm") ||
          (props.lg && "lg") ||
          (props.xl && "xl") ||
          "md"
        );
      });
      const classes = computed(() => {
        return {
          [`con-w-avatar-${props.color}`]: true,
          "w-avatar--icon": props.icon,
          [`size--${size.value}`]: true,
        }
      })

      const styles = computed(() => {
        return {
          width: /[px]/.test(props.size) ? props.size : null,
          height: /[px]/.test(props.size) ? props.size : null,
          background: props.color,
        }
      })
      const badgeClass = computed(() => {
        const classes = {
          badgeNumber: typeof badge != "boolean"
        };
        if (_color.isColor(props.badgeColor)) {
          classes[`dot-count-${props.badgeColor}`] = true;
        }
        return classes;
      })
      const badgeStyle = computed(() => {
        const style = {};
        if (!_color.isColor(props.badgeColor)) {
          style.background = _color.getColor(props.badgeColor);
        }
        return style;
      })
      const textClass = computed(() => {
        return {
          [`w-avatar-text-${props.textColor}`]: true
        };
      })

      const iconStyle = computed(() => {
        return {
          color: props.iconColor,
        }
      })
      const returnText = computed(() => {
        if (!props.text) {
          return
        }
        if (props.text.length <= 5) {
          return props.text;
        }
        let exp = /\s/g;
        var letras = "";
        if (exp.test(props.text)) {
          props.text.split(exp).forEach(word => {
            letras += word[0].toUpperCase();
          });
        } else {
          letras = props.text[0].toUpperCase();
        }
        return letras.length > 5 ? letras[0] : letras;
      })
      const returnScale = computed(() => {
        if (!props.text) return 1;
        let lengthx = returnText.value.length;
        if (lengthx <= 5 && lengthx > 1) {
          return lengthx / (lengthx * 1.5);
        } else {
          return 1;
        }
      })
      const textStyle = computed(() => {
        return {
          transform: `translate(-50%,-50%) scale(${returnScale.value})`,
          color: props.textColor,
        }
      })

      return {
        classes,
        styles,
        badgeClass,
        badgeStyle,
        textClass,
        iconStyle,
        textStyle,
        returnText,
        returnScale,
      }
    }
  };
</script>